<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        title: {
            text: '门店退款记录表',
            style: { 
                    fontWeight: 'bold',
                    fontSize: '20px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
        },
        xAxis: {
            categories: ['1/1','1/2','1/3','1/4','1/5',
                         '1/6','1/7','1/8','1/9','1/10'],
            labels: {
                    step: 1,
                    style: { 
                    fontSize: '16px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
                }
        },        
        yAxis: {
            title: {
                text: '退款金额',
                    style: { 
                    fontSize: '16px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
            },
                labels: {
                    formatter: function () {
                        return Math.abs(this.value) + '元';
                    },
                    style: { 
                    fontSize: '12px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
                }

        },
        labels: {
            items: [{
                html: '门店总退款金额',
                style: {
                    left: '75px',
                    top: '-30px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },tooltip: {
            headerFormat: '<span style="font-size:12px">{series.name}</span>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f}元</b>',
        },
        series: [{
            type: 'column',
            name: '北京店退款金额',
            data: [168, 112, 130, 38, 114,57, 82, 110, 63, 74]
        }, {
            type: 'column',
            name: '上海店退款金额',
            data: [112, 93, 105, 76, 69,131, 102, 177, 83, 104]
        }, {
            type: 'column',
            name: '廣州店退款金额',
            data: [94, 83, 113, 90, 170,73, 92, 81, 131, 64]
        },{
            type: 'column',
            name: '深圳店退款金额',
            data: [64, 73, 38, 91, 158,43, 52, 107, 53, 49]
        },{
            type: 'column',
            name: '重庆店退款金额',
            data: [49, 63, 38, 99, 130,93, 52, 137, 33, 54]
        }, {
            type: 'pie',
            name: '门店总退款金额',
            data: [{
                name: '北京店',
                y: 948,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: '上海店',
                y: 1052,
                color: Highcharts.getOptions().colors[1] // John's color
            }, {
                name: '廣州店',
                y: 991,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }, {
                name: '深圳店',
                y: 728,
                color: Highcharts.getOptions().colors[3] // Joe's color
            }, {
                name: '重庆店',
                y: 748,
                color: Highcharts.getOptions().colors[4] // Joe's color
            }],
            center: [100, 30],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
});
</script>
<div id="container" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
